import saleOutSrc from './sale-out.png';
import Circle from 'src/components/circle/circle';
import Tag from 'src/components/tag/tag';
import { Flex } from 'antd-mobile';
import styles from './period.less';
import {connect} from 'dva'
import router from 'umi/router'

export default connect(
  (buy) => ({buy})
)(function(props) {
  return (
    <Flex direction="column">
      {props.DataList.map((data, index) => {
        // let percent = 1 / 200 * 100
        let percent = parseFloat((data.cattle_saled / data.cattle_total * 100).toFixed(2));
        let latestPeriod = data
        return (
          <Flex
            className={styles.ListItem}
            key={index}
            onClick={() => {
              console.log('点击')
              props.dispatch({
                type: 'buy/pageInit',
                latestPeriod
              });
              router.push('/layout/buy?tabName=main');
            }}
          >
            <div className={styles.thumbWrap}>
              <img src={require('../../assets/cattle.svg')} alt="图片" className={styles.thumb} />
              <div className={styles.tag}>
                <Tag text={`第${data.id}期`} />
              </div>
            </div>
            <Flex.Item className={styles.ListItemMain}>
              <Flex direction="column" className={styles.ListItemWrap}>
                <Flex className={styles.ListItemTitle}>
                  {`${data.cattle_type}${data.cattle_total}只${data.bonus_type}分红`}
                </Flex>
                <Flex.Item>
                  <Flex className={styles.ListItemBottom}>
                    <Flex direction="column" className={styles.ListItemBottomReturnRate}>
                      <span>预期年分红</span>
                      <span className={styles.orangeText}>{data.return_rate}%</span>
                    </Flex>
                    <Flex direction="column" className={styles.ListItemBottomItem}>
                      <span>元/只</span>
                      <span className={styles.orangeText}>{data.price}</span>
                    </Flex>
                    {/* <Flex direction="column" className={styles.ListItemBottomItem}>
                      <span>期限</span>
                      <span className={styles.orangeText}>
                        {data.term}
                        个月
                      </span>
                    </Flex> */}
                  </Flex>
                </Flex.Item>
                <div className={styles.qixian}>
                   <span className={styles.childOne}>期限</span>
                   <span className={styles.child} >
                      {data.term}个月
                    </span>
                </div>
              </Flex>
              <img
                src={saleOutSrc}
                className={styles.seal}
                style={{ display: percent == 100 ? 'block' : 'none' }}
              />
            </Flex.Item>
            <div className={styles.circle}>
              <Circle percent={percent} />
            </div>
          </Flex>
        );
      })}
    </Flex>
  );
})
